<template>
  <div>
    <el-card class="box-card" style="margin-top: 6px;overflow-x: auto;text-align: right;">
      <el-pagination
        :current-page="pager.currentPage"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="pager.pageSize"
        :total="pager.totalPage"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'Pagination',
  props: ['pager'],
  data() {
    return {}
  },
  computed: {
    total() {
      return this.pager.totalPage
    }
  },
  created() {},
  methods: {
    // 每页多少条
    handleSizeChange(val) {
      this.pager.pageSize = val
      this.$emit('search')
    },
    // 第几页
    handleCurrentChange(val) {
      this.pager.currentPage = val
      this.$emit('search')
    }
  }
}
</script>

<style scoped>
</style>
